import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_learn_vi/src/base/rating_star_widget.dart';
import 'package:flutter_learn_vi/src/bean/bean_video_course.dart';

/// 创建人： Created by zhaolong
/// 创建时间：Created by  on 2021/1/13.
///
/// 可关注公众号：我的大前端生涯   获取最新技术分享
/// 可关注网易云课堂：https://study.163.com/instructor/1021406098.htm
/// 可关注博客：https://blog.csdn.net/zl18603543572
///
/// 代码清单
///课程评价
class CoursEevaluatePage extends StatefulWidget {
  final BeanVideoCourse beanVideoCourse;

  const CoursEevaluatePage({Key key, this.beanVideoCourse}) : super(key: key);

  @override
  _CoursEevaluatePageState createState() => _CoursEevaluatePageState();
}

class _CoursEevaluatePageState extends State<CoursEevaluatePage>
    with AutomaticKeepAliveClientMixin {
  //标签页面保活 或者称保持状态
  @override
  bool get wantKeepAlive => true;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);
    //一个列表 切记不要再使用 Scaffold
    //否则会拦截事件 失去滑动联动效果
    return ListView.builder(
      //去除内边距
      padding: EdgeInsets.all(0),
      //列表子Item个数
      itemCount: 200,
      //每个子Item的布局构建
      itemBuilder: (BuildContext context, int index) {
        if (index == 0) {
          return buildTotalScoreWidget(index);
        } else {
          return buildBodyWidget(index);
        }
      },
    );
  }

  //每个子Item的布局构建
  Widget buildBodyWidget(int index) {
    //水波纹点击事件监听
    return InkWell(
      //手指点击抬起时的回调
      onTap: () {
        //打开新的页面
      },
      child: Container(
        padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 24),
        color: Colors.white,
        //线性布局左右排列
        child: Row(
          //主轴方向开始对齐 在这里是左对齐
          mainAxisAlignment: MainAxisAlignment.start,
          //交叉轴上开始对齐 在这里是顶部对齐
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            //左侧的图片
            buildLeftImage(),
            //右侧的文本区域
            buildRightTextArea(index),
            buildRightEvaluate(),
          ],
        ),
      ),
    );
  }

  ///左侧的图片区域
  Container buildLeftImage() {
    double radius = 10;
    return Container(
      margin: EdgeInsets.only(right: 12),
      child: ClipOval(
        child: Image.asset(
          "assets/images/2.0x/banner3.webp",
          width: 44,
          fit: BoxFit.fill,
          height: 44,
        ),
      ),
    );
  }

  ///右侧的文本区域
  Expanded buildRightTextArea(int index) {
    return Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            "早起的年轻人",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            style: TextStyle(fontSize: 14),
          ),
          SizedBox(
            height: 8,
          ),
          Text(
            "细节的处理，更源自于自我要求与努力",
            softWrap: true,
            overflow: TextOverflow.ellipsis,
            maxLines: 1,
            style: TextStyle(fontSize: 12, color: Colors.black38),
          )
        ],
      ),
    );
  }

  buildRightEvaluate() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          width: 103,
          child: RatingStarWidget(
            starSize: 16,
            //评分回调的数据类型
            starType: StarType.iStar,
            //选中的五角星的高亮颜色
            selectColor: Colors.green,
            //背景显示的五角星的颜色
            normalColor: Colors.grey[400],
            //评分五角星的间隔
            space: 1,
            //是否可滑动或者是点击修改评分值
            isAnimation: false,
            //五角星个数
            totalNumber: 6,
            //高亮显示的五角星的个数
            initNumber: 4,
            //初始化选择五角星的加载动画  默认无动画
            starAnimationType: StarAnimationType.fade,
            //五角星的加载动画的时间 默认 800毫秒
            animationMills: 1000,
            //滑动或者点击评分修改后的回调
            selectCallback: (value) {
              print("选择的评分  $value");
            },
          ),
        ),
        SizedBox(
          height: 8,
        ),
        Text(
          "2020-12-12",
          softWrap: true,
          overflow: TextOverflow.ellipsis,
          maxLines: 1,
          style: TextStyle(fontSize: 12, color: Colors.black38),
        )
      ],
    );
  }

  Widget buildTotalScoreWidget(int index) {
    return Card(
      margin: EdgeInsets.all(6),
      elevation: 4.0,
      child: Row(
        children: [
          SizedBox(
            width: 10,
          ),
          Image.asset(
            "assets/images/2.0x/tips_icon.gif",
            width: 155,
          ),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  "评分 5.0",
                  style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 33,
                  ),
                )
              ],
            ),
          )
        ],
      ),
    );
  }
}
